<template>
  <div class="app-container">
    <div class="date">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="date-frame">
            <div style="white-space: nowrap">选择时间段：</div>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="YYYY-MM-DD" placeholder="选择时间段"></el-date-picker>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="date-frame">
            <el-button type="primary">查询</el-button>
            <!-- @click="toZS" -->
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="header">
      <header_index :dateRange="dateRange"></header_index>
    </div>

    <el-row :gutter="10">
      <el-col :span="14">
        <div class="card-2" style="padding: 10px;">
          <BarChart :dateRange="dateRange"></BarChart>
        </div>
      </el-col>
      <el-col :span="10">
        <div >
          <Reminder :dateRange="dateRange"></Reminder>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="14">
        <div class="card-2" style="padding: 10px;">
          <inspection :dateRange="dateRange"></inspection>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="card-2" style="padding: 10px;">
          <InspectionTask :dateRange="dateRange"></InspectionTask>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from '@/views/dashboard/BarChart.vue'
import PieChart from '@/views/dashboard/PieChart.vue'
import header_index from '@/views/dashboard/header_index.vue'
import Reminder from '@/views/dashboard/Reminder.vue'
import inspection from '@/views/dashboard/inspection.vue'
import InspectionTask from './dashboard/InspectionTask.vue'

import moment from 'moment'
import { useRouter } from 'vue-router'

export default {
  name: 'Index',
  data() {
    return {
      dateRange: [],
      router: useRouter()
    }
  },
  components: {
    BarChart,
    PieChart,
    header_index,
    Reminder,
    inspection,
    InspectionTask
  },
  created() {
    const startDate = moment().startOf('month').format('YYYY-MM-DD')
    const endDate = moment().endOf('month').format('YYYY-MM-DD')
    this.dateRange = [startDate, endDate]
  },
  methods: {
    toZS() {
      this.router.push({
        path: '/traceability'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.date-frame {
  display: flex;
  align-items: center;
  height: 54px;
  font-size: 14px;
  color: #999;
}

.height {
  height: 120px;
}

.card-2 {
  padding: 10px 30px;
  background-color: #fff;
  margin-bottom: 10px;

  .card-2-title {
    padding-bottom: 10px;
    font-size: 14px;
    color: #999;
  }
}

.card {
  padding: 10px 30px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .card-num {
    font-size: 24px;
    padding-bottom: 5px;
  }

  .card-title {
    font-size: 14px;
    color: #999;

    .card-year {
      padding-left: 2px;
    }

    .card-name {
      padding-right: 5px;
      color: #333;
    }
  }
}
</style>